<template>
  <div class="box detailBox">
    <van-nav-bar
      title="商品详情"
      right-text="分享"
      left-arrow
      @click-left="$router.back()"
      @click-right="onClickRight"
    />
    <div class="cont">
      <van-swipe class="my-swipe" indicator-color="white" @change="onChange" ref="mySwipe">
        <van-swipe-item v-for="item in proImgs" :key="item.id" @click="onImgProView">
          <van-image
            width="100vw"
            height="4rem"
            fit="cover"
            :src="item.img"
          />
        </van-swipe-item>
      </van-swipe>
      <div class="info">
        <h2>商品名称：{{proInfo.proName}}</h2>
        <p>商品描述：{{proInfo.describe}}</p>
        <p>商品分类：{{proInfo.type}}</p>
        <p>品牌：{{proInfo.brand}} <img :src="proInfo.logo" width="200"></p>
        <p>原价：<del>{{proInfo.price}}</del></p>
        <p>现价：<span>{{proInfo.price * proInfo.discount/10}}</span></p>
        <p>销量：{{proInfo.stock}}</p>
        <p>剩余：{{proInfo.sales - proInfo.stock}}</p>
        <p>评分：{{proInfo.score}}</p>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Swipe, SwipeItem, GoodsAction, GoodsActionIcon, GoodsActionButton, Image as VanImage, ImagePreview, Toast } from 'vant'
import { getDetail, addCart } from '@/request/index.js'

Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(VanImage)
Vue.use(Toast)

export default {
  props: ['qwe'],
  data () {
    return {
      proInfo: {},
      proImgs: [{
        id: 1,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201408%2F24%2F20140824154253_45Hay.png&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg'
      }, {
        id: 2,
        img: 'https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=a587b23df11f3a295a9dddcaac159007/500fd9f9d72a60590cfef2f92934349b023bba62.jpg'
      }],
      index: 0
    }
  },
  mounted () {
    // console.log('params', this.$route.params.qwe)
    // console.log('query', this.$route.query.id)
    // 请求商品详情信息
    console.log(this.qwe)
    getDetail({
      id: this.qwe
    }).then(data => {
      this.proInfo = data.data.data
      // 将图片单独处理,用于渲染商品图
      this.proImgs.unshift({
        id: 0,
        img: data.data.data.proImg
      })
    })
  },
  methods: {
    onClickRight () {},
    onImgProView (e) {
      const that = this
      // 点击商品图时的放大
      // 处理图片放大组件需要用的数据
      const arr = []
      this.proImgs.forEach(val => {
        arr.push(val.img)
      })
      // 调用图片放大功能
      ImagePreview({
        images: arr, // 传入图片数据
        startPosition: this.index, // 设置默认索引
        onChange (i) { // 添加改变图片时的方法
          // 调用轮播图的滑动到指定位置方法,将放大图片的索引传入
          // 放大图的滑动同步到轮播图
          that.$refs.mySwipe.swipeTo(i)
        }
      })
    },
    onChange (i) {
      // 轮播图改变时,将索引保存,用于设置放大图的初始位置
      this.index = i
    },
    addCart () {
      // this.$router.push('/login')
      // 获取到当前商品详情
      const obj = this.proInfo
      // 添加购物车需要的数量和是否选中属性
      obj.num = 1
      obj.flag = 1
      // 调用添加购物车数据接口
      addCart({
        proData: JSON.stringify(obj)
      }).then(data => {
        // console.log(data.data)
        if (data.data.code === 0) {
          Toast('商品已售完')
        } else {
          Toast('添加购物车成功')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.cont{
  flex: 1;
  overflow: auto;
  padding-bottom: 0.6rem;
  .info{
    p{
      font-size: 20px;
    }
    span{
      font-size: 40px;
      color: red;
    }
  }
}
</style>
